<template>
	<view class="">
		<view class="uni-pa-8 solid uni-primary text-df uni-radius-lg" @click="show">
			<slot>
				<text class="">点击签名</text>
			</slot>
		</view>
		<view v-if="signatureInfo.url || signatureInfo.path" class="">
			<image
				@click="previewImg(signatureInfo.url || staticUrl + signatureInfo.path)"
				style="width: 200rpx; height: 100rpx"
				:src="signatureInfo.url || staticUrl + signatureInfo.path"
				mode="aspectFit"
			></image>
		</view>
		<uwo-signature-modal ref="uwoSignatureModel" @ok="ok"></uwo-signature-modal>
	</view>
</template>
<script>
export default {
	props: {
		// 显示签名
		modelValue: {
			type: Object,
			default: function () {
				return {};
			}
		},
		// 文件访问跟地址
		staticUrl: {
			type: String,
			default() {
				return '';
			}
		},
		// 文件上传地址
		uploadUrl: {
			type: String,
			default() {
				return '';
			}
		},
		// 是否禁用
		disabled: {
			type: Boolean,
			default: false
		},
		// 请求头
		headers: {
			validator: function (value) {
				if (value) {
					return typeof value === 'object' || typeof value === 'function';
				} else {
					return true;
				}
			},
			default: function () {
				return {};
			}
		},
		// 请求参数
		params: {
			validator: function (value) {
				if (value) {
					return typeof value === 'object' || typeof value === 'function';
				} else {
					return true;
				}
			},
			default: function () {
				return {};
			}
		}
	},
	emits: ['update:modelValue'],
	watch: {
		modelValue: {
			handler(val, oldVal) {
				this.signatureInfo = val || {};
			},
			immediate: true
		}
	},
	data() {
		return {
			signatureInfo: {}
		};
	},
	onLoad() {},
	methods: {
		show() {
			if (this.disabled) {
				return;
			}
			this.$nextTick(() => {
				this.$refs.uwoSignatureModel.show({
					// 文件上传地址
					uploadUrl: this.uploadUrl,
					// 请求头
					headers: this.headers,
					// 请求参数
					params: this.params
				});
			});
		},
		ok(res) {
			this.$emit('update:modelValue', res);
		},
		previewImg(url) {
			uni.previewImage({
				urls: [url]
			});
		}
	}
};
</script>
<style></style>
